<template>
  <div class="login-page">
    <div class="login-content">
      <van-nav-bar>
        <template #title>
          <div class="title">注册</div>
        </template>
      </van-nav-bar>
      <van-form @submit="onSubmit">
        <van-field
          v-model="form.username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="form.password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="form.name"
          name="name"
          label="姓名"
          placeholder="姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
				<van-field name="sex" label="性别">
  				<template #input>
						<van-radio-group
							:rules="[{ required: true, message: '请选择性别' }]"
							v-model="form.sex" direction="horizontal">
							<van-radio name="男">男</van-radio>
							<van-radio name="女">女</van-radio>
						</van-radio-group>
					</template>
				</van-field>
        <van-field
          v-model="form.age"
          name="age"
          label="年龄"
          placeholder="年龄"
          :rules="[{ required: true, message: '请填写年龄' }]"
        />
        <van-field
          v-model="form.height"
          name="height"
          label="身高"
          placeholder="身高"
          :rules="[{ required: true, message: '请填写身高' }]"
        />
        <van-field
          v-model="form.weight"
          name="weight"
          label="体重"
          placeholder="体重"
          :rules="[{ required: true, message: '请填写体重' }]"
        />
        <div style="margin: 16px">
          <van-button block type="primary" native-type="submit"
            >注册</van-button
          >
        </div>
      </van-form>
      <router-link to="/login" class="link">已有账号,去登录</router-link>
    </div>
  </div>
</template>

<script setup>
import { showNotify } from "vant";
import { register } from "@/api/http.js";
const router = useRouter();
let form = reactive({
	username: '',
	password: '',
	name: '',
	sex: '男',
	age: '',
	height: '',
	weight: '',
})
const onSubmit = async (values) => {
  register({
		...form,
		role: 'user'
	}).then((res) => {
    if (res.code == "200") {
			showNotify({ type: "success", message: '注册成功，请登录' });
			router.push("/login");
    } else {
      showNotify({ type: "danger", message: res.message });
    }
  });
};
</script>

<style lang="less" scoped>
.login-page {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  background-image: url("~@/assets/images/login.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.9;
  .login-content {
    margin: auto;
    padding: 10px 10px 20px 10px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
    .title {
      font-size: 20px;
      font-weight: 600;
    }
  }

  .link {
    font-size: 12px;
    color: #069;
    float: right;
    margin-right: 15px;
  }
}
</style>
